@extends("layout")
@section("metadata")
  <title>Belot Stars Home Page</title>
  {{ HTML::style('css/main.css'); }}
  {{ HTML::script('js/jquery-1.7.2.min.js'); }}
  {{ HTML::script('js/jquery.knob.js'); }}
  {{ HTML::script('js/tooltip/tooltipsy.min.js'); }}
  {{ HTML::script('js/game.js'); }}
  {{ HTML::script('js/tooltip/all.js'); }}
  {{ HTML::script('js/library.js'); }}
  <script>
    $( document ).ready(function() {
      var width = 60;
      var left  = 205;
      var top   = (-215);


      $("#player_3 .player-cards img").click(function()
      {
        var index = $("#player_3 .player-cards img").index($(this));
        $(this).animate({
            left: left-(index*width),
            top:  top,
            width: '52px',
            height: '70px' 
          }, 500, 'linear', function(){
          var src = $(this).attr('src');
          $(this).remove();
          PostPlayerCard(src);
        });
      });

      function PostPlayerCard(src)
      {
        left = left-width/2;
        $('#game_set #player_3_card img').attr('src', src);
        return false;
      } 
    });
  </script>
@stop
@section("content")

    <div id="table-content">
      <div class="table">
        
        
        <div id="player_1" class="player">
          <?php RenderPlayerProfile(1); ?>
        </div>
        <div id="player-2-4">
          <div id="player_2" class="player">
            <?php RenderPlayerProfile(2); ?>
          </div>
          <div id="player_4" class="player">
            <?php RenderPlayerProfile(4); ?>
          </div>
          <div class="game">
            <div id="game_set">
              <div id="player_1_card">
                <?php print '<img src="img/cards/ace_hearts.png" width="52" height="70">'; ?>
              </div>
              <div id="player_2_card">
                <?php print '<img src="img/cards/ace_hearts.png" width="52" height="70">'; ?>
              </div>
              <div id="player_4_card">
                <?php print '<img src="img/cards/ace_hearts.png" width="52" height="70">'; ?>
              </div>
              <div id="player_3_card">
                <?php print '<img src="img/cards/ace_hearts.png" width="52" height="70">'; ?>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="clear"></div>
      <div class="main-player">
          <div id="player_3" class="player">
            <div class="player-cards">
              <?php
                $j = 0;
                $i = 0;
                foreach($deck as $card)
                {
                    if ($i < 8)
                    {
                      $i++;
                      print '<img src="img/cards/' . $card->rank . '_' . $card->suit . '.png" width="60" height="80">';
                    }
                }
              ?>
            </div>
          </div>
        </div>
      
    </div>

    <br/>
    <br/>
    <br/>
    <br/>
  
  <?php
    //var_dump($deck);
  ?>
@stop
@section("footer")
    @parent
    <script src="//polyfill.io"></script>
@stop